<template>
	<view class="padTop_128 fullBox">
		<view class="searchBlock ">
			<u-search placeholder="请输入订单编号搜索" :show-action="false" @search="search" v-model="keyword"
				@clear="getLimitLog(yearMonth,keyword)"></u-search>
		</view>
		<view class="list_th">
			<view>全部记录</view>
			<view class="typeBox" @click="datePickShow = true">{{yearMonth == ""?"选择时间":yearMonth}}<u-icon
					name="arrow-down-fill" color="#969798" size="18"></u-icon></view>
		</view>
		<view class="logList" v-for="(item,index) in logList" :key="index">
			<view class="dateCheck">{{item.dataTag}}</view>
			<view class="item" v-for="(log,i) in item.children" :key="i">
				<view class="tagInfo"
					style="background: url(https://supply.zhongyimotor.com/upload/applet/model@2x.png) 0 center no-repeat;background-size: 32rpx;">
					<view class="Vin">{{log.id}}</view>
					<view class="amount"><u-icon name="rmb" size="24"></u-icon>{{log.amount}}</view>
				</view>
				<view class="orderInfo">
					<view class="info">
						<view class="title">品牌名称</view>
						<view class="content">{{log.brand}}-{{log.series}}-{{log.model}}</view>
					</view>
					<view class="info">
						<view class="title">授信银行</view>
						<view class="content">{{log.bank}}</view>
					</view>
					<view class="info">
						<view class="title">交易时间</view>
						<view class="content">{{log.timeCreate}}</view>
					</view>
				</view>
			</view>
		</view>
		<u-empty src="https://supply.zhongyimotor.com/upload/applet/maorder_kong_img@2x.png" icon-size="296"
			v-if="logList.length == 0" margin-top="-68" text="暂无数据"></u-empty>
		<u-select v-model="datePickShow" mode="mutil-column-auto" :list="dateList" @confirm="dateConfirm"></u-select>
		<u-toast ref="uToast" />
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import moment from "moment"
	export default {
		data() {
			return {
				logList: [],
				datePickShow: false,
				dateList: [],
				yearMonth: "",
				keyword: ""
			}
		},
		onShow() {
			this.getLimitLog()
			this.dateList = this.getMonthList();
		},
		methods: {
			search(keyword) {
				this.getLimitLog(this.yearMonth, keyword)
			},
			dateConfirm(e) {
				if (e[1].value <= 9) {
					this.yearMonth = e[0].value + "-0" + e[1].value
				} else {
					this.yearMonth = e[0].value + "-" + e[1].value
				}
				this.getLimitLog(this.yearMonth)
			},
			getLimitLog(yearMonth = "", id = "") {
				let that = this
				let params = {
					yearMonth,
					id
				}
				that.$api.getLimitLog(params).then((res) => {
					that.logList = res.result;
					that.logList.forEach((item) => {
						item.dataTag = moment(item.timeCreate).format('YYYY-MM-DD')
						item.timeCreate = moment(item.timeCreate).format('YYYY-MM-DD HH:mm:ss')
					})
					const newArray = []
					that.logList.forEach(item => {
						const repeat = newArray.find(res => res.dataTag === item.dataTag)
						if (!repeat) {
							newArray.push({
								dataTag: item.dataTag,
								children: [item]
							})
						} else {
							repeat.children.push(item)
						}
					})
					that.logList = newArray
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.logList {
		.dateCheck {
			width: 750rpx;
			height: 68rpx;
			padding: 0 30rpx;
			background: #F7F7F7;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #969696;
			line-height: 68rpx;
		}

		.item {
			.orderInfo {
				width: 750rpx;
				padding: 30rpx;
				border-bottom: 2rpx solid #F2F2F2;

				.info {
					display: flex;
					font-size: 26rpx;
					font-weight: 400;
					margin-bottom: 24rpx;

					.title {
						color: #7C7C7C;
						margin-right: 68rpx;
					}

					.content {
						color: #202020;
					}
				}
			}

			.tagInfo {
				margin-left: 30rpx;
				padding-right: 30rpx;
				line-height: 90rpx;
				border-bottom: 2rpx solid #F2F2F2;
				display: flex;

				.Vin {
					padding-left: 52rpx;
					margin-right: auto;
				}

				.amount {
					font-size: 36rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #F86920;
				}
			}
		}
	}
</style>